<template>
  <el-container>
        <el-header>
            <Tabs :userName="userName"/>
        </el-header>
        <HeaderTop  :flag="true"  />
        <el-main>
            <el-row class="main-top">
                <el-breadcrumb separator="/" class="content">
                    <h3>我的购物车</h3>
                    <el-breadcrumb-item><a @click="target()">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>购物车</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-row class="main-box">
                <el-row class="main-bottom">
                    <el-col :span="16">
                            <el-table
                                :data="tableData"
                                style="width: 100%">
                                <el-table-column  label="产品名称" align="center"  width="300px">
                                    <template slot-scope="scoped">
                                        <el-row>
                                            <el-col :span="6">
                                                <img width="100%" height="100%" :src="scoped.row.img" alt="">
                                            </el-col>
                                            <el-col :span="12" :offset="4">{{scoped.row.text}}</el-col>
                                        </el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column   label="数量" align="center"    width="250">
                                    <template slot-scope="scoped">
                                        <el-row @click.native.prevent="getNum(scoped.$index)">
                                            <CountButton  @change="getValue" />
                                        </el-row>
                                        <el-row class="price-text" ><span>* ￥{{scoped.row.price}}</span></el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column label="合计价格" align="center" >
                                    <template slot-scope="scoped">
                                        <el-row>  {{ (scoped.row.num * scoped.row.price).toFixed(2) }}</el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <el-button
                                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                                        round
                                        type="danger"
                                        size="small"
                                        class="el-icon-delete">
  
                                        </el-button>
                                        
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-row>
                                <el-col :span="8" :offset="16">
                                    <el-button @click="clearData()" class="clear-shop" size="small" ><span class="el-icon-delete"></span> 清空购物车</el-button>
                                    <el-button @click="updata()" class="payment" size="small" ><span class="el-icon-check"></span> 更新购物车</el-button>
                                </el-col>
                            </el-row>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-row>
                            <el-col :span="6">商品总价</el-col>
                            <el-col :span="6" :offset="12">￥{{ allPrice.toFixed(2) }}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">物流费用</el-col>
                            <el-col :span="6" :offset="12">包邮</el-col>                      
                        </el-row>
                        <hr>
                        <el-row >
                            <el-col :span="6">合计金额</el-col>
                            <el-col class="all-price" :span="6" :offset="12">￥{{allPrice.toFixed(2)}}</el-col>                                     
                        </el-row>
                        <hr>
                        <el-row>
                            <el-col :span="8" :offset="16">
                                <el-button class="payment" size="small" ><span class="el-icon-check"></span> 立即支付</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-row>
        </el-main>
        
        <el-footer >
            全国高职院校Web应用软件开发技能竞赛
        </el-footer>
  </el-container>
</template>

<script>
import CountButton from '../CountButton/CountButton.vue'
import HeaderTop from '../HeaderTop/HeaderTop.vue'
import Tabs from '../Tabs/Tabs.vue'
export default {
    components: { Tabs, HeaderTop, CountButton },
    data(){
        return {
            userName:'',
            tableData:[
                {
                    "img":"http://10.203.0.101:8081/shopping/resources/upload/2ad834a8448d4d839d9f1f64b6ee8fea.jpg",
                    "text":"【海尔】寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果",
                    "price":73.50,
                    "num":1
                },
                {
                    "img":"http://10.203.0.101:8081/shopping/resources/upload/2ad834a8448d4d839d9f1f64b6ee8fea.jpg",
                    "text":"【海尔】寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果",
                    "price":99.99,
                    "num":1
                }
            ],
            currentNum:1
        }
    },
    methods:{
        getNum(index){
            this.tableData[index]['num'] = this.currentNum
        },
        target(){
            this.$router.push('/home')
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        clearData(){
            this.tableData = []
            this.$message({
                type:'success',
                message:'清除成功'
            })
        },
        updata(){
            this.$message({
                type:'success',
                message:'更新成功'
            })
        },
        getValue(value){
            this.currentNum = value
            console.log(this.currentNum)
        },
    },
    computed:{
        allPrice(){
            let allPrice = 0
            this.tableData.forEach((item,index)=>{
                allPrice += item.num*item.price
            })
            return allPrice
        }
    },
    mounted(){
        let name =  localStorage.getItem('userName') 
        this.userName = name
    }
}
</script>

<style scoped>
.el-container{
    position: relative;
    min-height: 100%;
}
.el-main{
    padding: 0px;
}
.main-top{
    margin-top: 60px;
    width: 100%;
    height: 110px;
    line-height: 110px;
    background: rgba(0,0,0,0.05);
}
.el-breadcrumb{
    padding: 25px 90px;
}
.main-box{
    padding: 40px 80px 0px;
}
.el-footer{
    /* position: relative; */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #bfa;
    text-align: center;
    line-height: 50px;
}
h3{
    margin: 0px;
}

.price-text{
    text-align: center;
}
.all-price{
    font-size: 20px;
    color: #666;
}
.clear-shop{
    border: 1px solid #F56C6C;
    color: #F56C6C;    
}
.payment{
    border: 1px solid #67C23A;
    color: #67C23A;
}

</style>